import 'package:flutter/material.dart';
import 'package:mini_calendar/mini_calendar.dart';

class TravelItem extends StatefulWidget {

  @override
  State<TravelItem> createState() => _TravelItemState();
}

class _TravelItemState extends State<TravelItem> {
  DateDay seleceDay; //选中的时间
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.all(12),
          child: Row(
            children: [
              Container(
                width: 3,
                height: 17,
                color: Color.fromRGBO(191, 55, 54, 1),
              ),
              Container(
                child: Text('出行时期'),
                margin: EdgeInsets.only(left: 10),
              )
            ],
          ),
        ),
        Container(
          child: MonthPageView(
            height: 330,
            buildMark: (BuildContext context, day, s) {
              return Stack(
                children: [
                  if (day != this.seleceDay)
                    Positioned(
                        top: 1,
                        right: 1,
                        child: Container(
                          width: 5,
                          height: 5,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(2.5),
                            color: Colors.red,
                          ),
                        )),
                  Positioned(
                      bottom: 0,
                      child: Container(
                        width: 50,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              child: Text(
                                '￥999',
                                style: TextStyle(
                                    color: day == this.seleceDay
                                        ? Colors.white
                                        : Colors.red,
                                    fontSize: 8),
                              ),
                            ),
                            if (day != this.seleceDay)
                              Container(
                                child: Text(
                                  '起',
                                  style: TextStyle(
                                      color: Colors.grey, fontSize: 8),
                                ),
                              ),
                          ],
                        ),
                      ))
                ],
              );
            },
            buildMonthHead: (context, width, height, mon) {
              return Container(
                width: 40,
                padding: EdgeInsets.only(left: 12, bottom: 12),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                            color: Color.fromRGBO(191, 55, 54, 1), width: 3))),
                child: Text(
                  '${mon.month}月',
                  style: TextStyle(
                      fontSize: 15, color: Color.fromRGBO(191, 55, 54, 1)),
                ),
              );
            },

            scrollDirection: Axis.horizontal,
            // 水平滑动或者竖直滑动
            option: MonthOption(
              enableDays: [
                DateDay.now().copyWith(day: 2),
                DateDay.now().copyWith(day: 5),
                DateDay.now().copyWith(day: 13),
                DateDay.now().copyWith(day: 19),
                DateDay.now().copyWith(day: 26)
              ],
              enableMultiple: false,
              marks: {
                DateDay.now().copyWith(day: 2): '111',
                DateDay.now().copyWith(day: 5): '222',
                DateDay.now().copyWith(day: 13): '333',
                DateDay.now().copyWith(day: 19): '444',
                DateDay.now().copyWith(day: 26): '444',
              },
            ),
            showWeekHead: true,
            // 显示星期头部
            onContinuousSelectListen: (firstDay, endFay) {},
            // 连选回调
            onMonthChange: (month) {},
            // 月份更改回调
            onDaySelected: (day, s, t) {
              print(day);
              this.seleceDay = day;
            },
            // 日期选中会迪欧啊
            onCreated: (controller) {}, // 控制器回调
          ),
          // 默认当月
        ),
        Container(
          height: 8,
          color: Color.fromRGBO(246, 246, 246, 1),
        ),
      ],
    );
  }
}
